<template>
  <div class="shop">
    <div class="searchCom">
      <div class="top">
        <div class="searchCom_left">
          <img
            src="../../assets/image/home/home (7).png"
            class="searchCom_img"
          />
        </div>
        <div class="searchCom_right">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane><span slot="label"><img src="../../assets/image/home/shop (4).png" class="img"/></span></el-tab-pane>
            <el-tab-pane><span slot="label"><img src="../../assets/image/home/shop (9).png" class="img"/></span></el-tab-pane>
            <el-tab-pane><span slot="label"><img src="../../assets/image/home/shop (2).png" class="img"/></span></el-tab-pane>
            <el-tab-pane><span slot="label"><img src="../../assets/image/home/shop (11).png" class="img"/></span></el-tab-pane
            >
          </el-tabs>
           <div class="bottom">
             <router-link to="/index/shop/create" tag="span">我的购物车</router-link>
             <router-link to="/index/shop/ok" tag="span">确认订单</router-link>
             <router-link to="/index/shop/affirm" tag="span">填报定数</router-link>
             <router-link to="/index/shop/fill" tag="span">生成征订单</router-link>
           </div>
        </div>
      </div>
      <router-view></router-view>
    </div>
    <Bottom/>
  </div>
</template>

<script>
import Bottom from '../../components/Bottom'
export default {
  components: {
      Bottom
  },
  data() {
    return {
      activeName: ''
    }
  },
  methods: {
    handleClick() {

    }
  }
}
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: 100%;
  .searchCom {
    width: 1310px;
    margin: 0 auto;
    height: 100%;
    .top {
      width: 100%;
      height: 94px;
      display: flex;
      margin: 28px 0 0 0px;
      .searchCom_left {
        img {
          width: 411px;
          height: 74px;
          margin: 0 32px 0 69px;
        }
      }
      .searchCom_right {
        margin-left:330px;
        .bottom{
          display: flex;
          width:400px;
          justify-content: space-between;
        }
      }
    }
  }
}
.img{
  width: 64px;
  height:48px;
}
.activeName {
  color: "green";
}
.router-link-active{
  color: #950006;
}
</style>